
var base = "/js/imagepicker";
var thumbWidth = 48;
var thumbHeight = 48;

var dialogWidth = 640;
var dialogHeight = 480;


/*******************************
 * Get images from DIR
 * 
 * @param directory
 * @param image
 * @param target
 * @return
 */

var g_directory, g_image, g_targetImage, g_targetInput;
function ImagePicker(directory, image, targetImage, targetInput) {
	g_directory = directory;
	g_image = image;
	g_targetImage = targetImage;
	g_targetInput = targetInput;
	
	var throbber = $('<div>loading...</div>');
	throbber.css({
		position:"absolute",
		opacity: 0.8,
		background: "#fff",
		color: "#000",
		display:"none",
		width: targetImage.width(),
		height: targetImage.height()
	});
	targetImage.before(throbber);
	$.ajax({
		url: base + "/getimages.php",
		data: {dir: directory},
		beforeSend: function() {
			throbber.show()
		},
		complete: function(req) {
			throbber.hide()
			if(req.status==200) {
				var images = eval('(' + req.responseText + ')');
				ImagePickerShow(directory, images, targetImage, targetInput);
			}else{
				alert(req.status + ". " + req.statusText);
			}
		}
	});	
}

function ImagePickerShow(directory, images, targetImage, targetInput) {
	var picker = $(".imagepicker-dialog");
	if(!picker.length) {
		ImagePickerMake(directory);
		picker = $(".imagepicker-dialog");
	}
	
	var list = picker.find("ul").eq(0);
	list.empty();
	for(var i=0; i<images.length; i++) {
		var li = $('<li title="' + images[i] + '"><img src="' + directory.replace(/\/$/,"") + '/' + images[i] + '" /></li>')
		li.click(function(e){
			$(this).parent().find("li").removeClass("selected");
			$(this).addClass("selected");
		});
		li.dblclick(function(){
			$(".ui-dialog-buttonpane button").eq(0).click();
		});
		list.append(li);
	}
	picker.dialog({
		title: "Odaberite sliku",
		width: dialogWidth,
		height: dialogHeight,
		buttons: {
			'Odaberi': function() {
				var img = $(this).find("ul li.selected img");
				if(img.length) {
					var src = img.attr("src");
					targetImage.attr("src", src);
					targetInput.val(src.substr(src.lastIndexOf("/")+1));
					$(this).dialog('close');
				}
			},
			'Ponisti': function() {
				targetImage.attr("src", root + "/img/blank.gif");
				targetInput.val("");
				$(this).dialog('close');
			},
			'Obriši': function() {
				var img = $(this).find("ul li.selected img");
				if(img.length) {
					if(!confirm("Da li želite da obrišete odabranu sliku?")) {
						return;
					}
					$.ajax({
						url: base + "/deleteimage.php",
						type: "post",
						data: {image: img.attr("src")},
						beforeSend: function() {
						},
						complete: function(req) {
							if(req.status==200) {
								var status = req.getResponseHeader("X-Imagepicker-Delete-Status");
								if(status){
									alert("Slika je obrisana.");
								}else{
									alert(req.responseText);
								}
								ImagePickerReload();
							}else{
								alert(req.status + ". " + req.statusText);
							}
						}
					});
				}
			}
		},
		beforeclose: function(e) {
			$(e.target).dialog("destroy");
		}
	});
}
function ImagePickerMake(directory) {
	var c = $('<div class="imagepicker-dialog" />');
	c.hide();
	
	// add stylesheet
	c.append('<link rel="stylesheet" type="text/css" href="' + base + '/style.php?thumb[width]='+thumbWidth+'&thumb[height]='+thumbHeight+'" />');
	
	var upload = $('<iframe src="' + base + '/upload.php?dir=' + directory + '" style="overflow:hidden; border:none; height:50px; width:100%;" allowtransparency="true" frameborder="0" /><br clear="all" />');
	c.append(upload);
	
	var list = $('<ul />');
	c.append(list);
	
	$(document.body).append(c);
}

function ImagePickerReload() {
	ImagePicker(g_directory, g_image, g_targetImage, g_targetInput);
}